<template>
  <CommonContainer title="订单信息">
    <div>
      <el-descriptions>
        <el-descriptions-item label="额度申请">
          <span style="color: #1890ff;cursor: pointer;" @click="goQurtaApplyDetail"> {{ orderInfo.orderNo || '--' }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="业务类型">
          <dict-tag
              :options="dict.type.business_type"
              :value="orderInfo.businessType"/>
        </el-descriptions-item>
        <el-descriptions-item label="产品方案">{{ orderInfo.planName || '--' }}</el-descriptions-item>
        <el-descriptions-item label="租赁用途">
          <dict-tag
              :options="dict.type.rental_purpose"
              :value="orderInfo.leasePurpose"/>
        </el-descriptions-item>
        <el-descriptions-item label="线索来源">
          <dict-tag
              :options="dict.type.clues_source"
              :value="clueClassification"/>
        </el-descriptions-item>
        <el-descriptions-item label="申请总台数">{{ orderInfo.applicationTotal || '--' }}</el-descriptions-item>
        <el-descriptions-item label="新车采购总额">{{ orderInfo.newCarProcurementAmount || '--' }}</el-descriptions-item>
        <el-descriptions-item label="旧车当前估值总额">{{ orderInfo.oldCarValuationAmount || '--' }}</el-descriptions-item>
        <el-descriptions-item label="申请总金额">{{ orderInfo.applicationTotalAmount || '--' }}</el-descriptions-item>
        <el-descriptions-item v-if="orderInfo.unitsLabel" :label="orderInfo.unitsLabel">{{ orderInfo.accumulatedNumberOfUnits || '--' }}</el-descriptions-item>
        <el-descriptions-item v-if="orderInfo.amountLabel" :label="orderInfo.amountLabel">{{ orderInfo.accumulatedNumberOfAmount || '--' }}</el-descriptions-item>
      </el-descriptions>
      <div>
        <el-table
            :data="cars"
            :header-cell-style="{ background: '#FAFAFA', color: '#000000' }" border>
          <el-table-column
              align="center"
              prop="vehicleManufacturers"
              label="车辆厂商"
              min-width="120">
          </el-table-column>
          <el-table-column
              align="center"
              prop="vehicleModel"
              label="车辆车型"
              min-width="120">
          </el-table-column>
          <el-table-column
              align="center"
              prop="vehicleStyle"
              label="车辆款型"
              min-width="120">
          </el-table-column>
          <el-table-column
              align="center"
              prop="carNo"
              label="车牌号"
              min-width="120">
          </el-table-column>
          <el-table-column
              align="center"
              prop="vehicleEnergyType"
              label="车辆能源类型"
              min-width="120">
          </el-table-column>
          <el-table-column
              align="center"
              prop="registrationNature"
              label="登记性质"
              min-width="120">
          </el-table-column>
          <el-table-column
              align="center"
              prop="applicationType"
              label="申请类型"
              min-width="120">
          </el-table-column>
          <el-table-column
              align="center"
              prop="leaseTerm"
              label="租赁期限(月)"
              min-width="120">
          </el-table-column>
          <el-table-column
              align="center"
              prop="rentPaymentMethod"
              label="租金支付方式"
              min-width="120">
          </el-table-column>
          <el-table-column
              align="center"
              prop="mileageLimit"
              label="里程限制（公里)"
              min-width="120">
          </el-table-column>
          <el-table-column
              align="center"
              prop="registeredCity"
              label="上牌城市"
              min-width="120">
          </el-table-column>
          <el-table-column
              align="center"
              prop="registrationFee"
              label="上牌费"
              min-width="120">
          </el-table-column>
          <el-table-column
              align="center"
              prop="insurancePremium"
              label="保险费"
              min-width="120">
          </el-table-column>
          <el-table-column
              align="center"
              prop="maintenancePremium"
              label="维保费"
              min-width="120">
          </el-table-column>
          <el-table-column
              align="center"
              prop="purchaseTax"
              label="购置税"
              min-width="120">
          </el-table-column>
          <el-table-column
              align="center"
              prop="vehicleAndVesselTax"
              label="车船税"
              min-width="120">
          </el-table-column>
          <el-table-column
              align="center"
              prop="installationCost"
              label="加装费用"
              min-width="120">
          </el-table-column>
          <el-table-column
              align="center"
              prop="otherExpenses"
              label="其他费用"
              min-width="120">
          </el-table-column>
          <el-table-column
              align="center"
              prop="irr"
              label="IRR（含牌照）"
              min-width="120">
            <template v-slot="{row}">
              <template v-if="row.irr">{{row.irr}}%</template>
              <template v-else>--</template>
            </template>
          </el-table-column>
          <el-table-column
              align="center"
              prop="margin"
              label="保证金"
              min-width="120">
          </el-table-column>
          <el-table-column
              align="center"
              prop="monthlyRent"
              label="月租金"
              min-width="120">
          </el-table-column>
          <el-table-column label="首期租金、比例" align="center" prop="firstInstallmentRent" min-width="150px" show-overflow-tooltip>
            <template v-slot="{row}">
              <template v-if="row.firstInstallmentRentalRatio">
                {{ row.firstInstallmentRent }} 、{{ row.firstInstallmentRentalRatio }}%
              </template>
              <template v-else>
                -- 、--
              </template>

            </template>
          </el-table-column>
          <el-table-column label="残值、比例" align="center" prop="totalApplicationNumber" min-width="120px" show-overflow-tooltip>
            <template v-slot="{row}">
              <template v-if="row.residualValueRatio">
                {{ row.residualValue }} 、 {{ row.residualValueRatio }}%
              </template>
              <template v-else>
                -- 、--
              </template>

            </template>
          </el-table-column>
          <el-table-column
              align="center"
              prop="suggestedPrice"
              label="厂商指导价"
              min-width="120">
          </el-table-column>
          <el-table-column
              align="center"
              prop="purchasePrice"
              label="新车采购单价"
              min-width="120">
          </el-table-column>
          <el-table-column
              align="center"
              prop="currentValuation"
              label="旧车当前估值"
              min-width="120">
          </el-table-column>
          <el-table-column
              align="center"
              prop="numberOfApplications"
              label="申请台数"
              min-width="120">
          </el-table-column>
          <el-table-column label="新车采购总额" align="center" prop="newCarProcurementAmount" min-width="120px" show-overflow-tooltip/>
          <el-table-column label="旧车当前估值总额" align="center" prop="oldCarValuationAmount" min-width="140px" show-overflow-tooltip/>

        </el-table>
      </div>

      <div v-if="orderList.length>0">
        <p>额度订单</p>
        <el-table
            :data="orderList"  border>
          <el-table-column
              type="index" label="序号" align="center"
              width="50">
          </el-table-column>
          <el-table-column  align="center"
              prop="orderCode"
              label="订单编号"
              min-width="120">
            <template v-slot="{row}">
              <e-button size="mini" type="text" @click="goQurtaDetail(row)">{{ row.orderCode }}</e-button>
            </template>
          </el-table-column>
          <el-table-column  align="center"
              prop="createTime"
              label="创建时间"
              min-width="120">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </CommonContainer>
</template>

<script>

import {quotaOrderMap} from '@/api/letterReview/letterReview'

export default {
  dicts: ['business_type', 'rental_purpose', 'clues_source'],
  components: {},
  props: {
    orderInfo: {
      type: Object,
      default: () => {
        return {}
      }
    },
    cars: {
      type: Array,
      default: () => {
        return []
      }
    },
    clueClassification: {
      type: String,
      default: ''
    }
  },
  data() {
    // 这里存放数据
    return {
      orderList:[]
    }
  },
  watch:{
    orderInfo:{
      handler(val){
        if(val&&val.orderNo){
          this.handleData(val.orderNo)
        }
      },
      deep:true
    },
  },
  // 计算属性 类似于 data 概念
  computed: {

  },
  // 方法集合
  methods: {
    //查看额度申请详情
    goQurtaApplyDetail() {
      if (this.checkPermi(['quota:apply:list:look'])) {
        this._toPage({
          name: 'ApplyDetails',
          query: {
            calcSchemeId: this.orderInfo.calcSchemeId
          }
        })
      } else {
        this.$message.warning('无权限')
      }
    },
    goQurtaDetail(row){
      // if (this.checkPermi(['quota:apply:list:look'])) {
        this._toPage({
          name: "OrderDetails",
          query: {
            type: row.carType,
            orderId: row.orderId,
            calcSchemeId: row.calcSchemeId,
          }
        });
      // } else {
      //   this.$message.warning('无权限')
      // }
    },

    handleData(val){
      quotaOrderMap(val).then(res=>{
        this.orderList= res.data||[]
      })
    },
  },
  // 生命周期 - 创建完成（可以访问当前this 实例）
  created() {
    if(this.orderInfo&&this.orderInfo.orderNo){
      this.handleData(this.orderInfo.orderNo)
    }

  },
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {
  },

}
</script>

<style lang="scss" scoped>
</style>
